<template>
  <div id="total">
    <div id="top">
      <div id="left">
        <!-- 单据号 -->
        <div id="documentNumber">
          <span>单据号:</span>
          <span>{{ data.id }}</span>
        </div>
        <!-- 制单人 -->
        <div id="documenter">
          <span>制单人:</span>
          <span>{{ data.purchaser }}</span>
        </div>
        <!-- 供应商 -->
        <div id="supplier">
          <span>供应商:</span>
          <span>{{ data.sup_name }}</span>
        </div>
        <!-- 制单日期 -->
        <div id="dateOfDocumentation">
          <span>制单日期:</span>
          <!-- 采购入库页面传入 -->
          <span>2023-02-15</span>
        </div>
      </div>
      <div id="right">
        <el-button v-if="!data.status" type="primary" @click="auditFn"
          >审核</el-button
        >
        <el-button @click="returnFn">返回</el-button>
      </div>
    </div>
    <div id="f">
      <div id="middle">
        <!-- 批发总金额 -->
        <div id="wholesale">
          <span>批发总金额:&nbsp&nbsp</span>
          <span id="red">{{ store.state.process.billTrade }}</span>

        </div>
        <!-- 处方总金额 -->
        <div id="wholesale">
          <span>处方总金额:&nbsp&nbsp</span>
          <span id="red">{{ store.state.process.billPre }}</span>
        </div>
      </div>
    </div>
    <!-- 表单 -->
    <div id="bottom">
      <div id="form">
        <el-table :data="getOrderData" style="width: 100%">
          <el-table-column type="index" width="80" />
          <el-table-column
            align="center"
            prop="drugName"
            label="药品名称"
            width="200"
          />
          <el-table-column
            align="center"
            prop="drugSpecification"
            label="规格"
            width="140"
          />
          <el-table-column
            align="center"
            prop="drugFactory"
            label="生产厂家"
            width="180"
          />
          <el-table-column
            align="center"
            prop="drugNumber"
            label="数量"
            width="120"
          />
          <el-table-column
            align="center"
            prop="drugUnit"
            label="单位"
            width="100"
          />
          <el-table-column
            align="center"
            prop="trade"
            label="批发价"
            width="140"
          />
          <el-table-column
            align="center"
            prop="prescription"
            label="处方价"
            width="140"
          />
          <el-table-column
            align="center"
            prop="trades"
            label="批发额"
            width="140"
          />
          <el-table-column
            align="center"
            prop="pres"
            label="处方额"
            width="140"
          />
          <el-table-column align="center" label="操作" width="140">
            <template #default="scope">
              <el-button disabled size="default" v-if="!data.status"
                >已审核</el-button
              >
              <el-button size="default" v-if="data.status">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div id="pager-wapper">
        <el-pagination
          :page-sizes="[2, 3, 5, 10]"
          id="paging"
          background
          layout="prev, pager, next"
          :total="store.state.process.orderTotal"
          @current-change="pageChange"
          v-model:page-size="pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineComponent, computed, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { mapGetters, mapMutations, useStore } from "vuex";

const store = useStore(); // 表格数据
const sendData = mapMutations(["sendData"]).sendData.bind({
  $store: store,
});
let data: any = store.state.process.sendData;
// 默认展示数据
const setOrderData = mapMutations(["setOrderData"]).setOrderData.bind({
  $store: store,
});
// 点击审核按钮
const setAuditFn = mapMutations(["setAuditFn"]).setAuditFn.bind({
  $store: store,
});
// 展示默认数据
const getOrderData = computed(
  mapGetters(["getOrderData"]).getOrderData.bind({
    $store: store,
  })
);
// 分页
// 默认每页展示1项
const pageSize = ref(1);
const billId = computed(
  mapGetters(["getBillId"]).getBillId.bind({
    $store: store,
  })
);
// 获取status
const status = computed(
  mapGetters(["getSendData"]).getSendData.bind({
    $store: store,
  })
);

onBeforeMount(() => {
  // console.log("1111!!!", data);

  setOrderData({
    currentPage: 0,
    pageSize: pageSize.value,
    billId: billId.value,
    status: status,
  });
});
// 分页功能实现
const pageChange = (currentPage: any) => {
  setOrderData({
    currentPage: currentPage,
    pageSize: pageSize.value,
    billId: billId.value,
  });
};

const returnFn = () => {
  router.push({
    path: "/medicine/process",
  });
};
// 审核按钮
const auditFn = () => {
  sendData(data);
  setAuditFn({
    id: billId.value,
  });
  router.push({
    path: "/medicine/purchase",
  });
};
</script>
<style scoped>
#total {
  display: flex;
  flex-direction: column;
}
#wholesale {
  margin-left: 20px;
}
#f {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 60px;
}
#top {
  display: flex;
  justify-content: space-between;
  background-color: white;
}
#left {
  display: flex;
  align-items: center;
   ;
  height: 50px;
}
#left > div {
  margin-left: 20px;
}
#right {
  border: red solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#red {
  color: red;
}
#middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
   ;
  height: 60px;
}
#pager-wapper > .el-pagination {
   
  justify-content: center;
  align-items: center;
}
#pager-wapper {
  margin-top: 20px;
}
</style>
